<!DOCTYPE html>
{% extends 'base_head.html' %}

{% block head %}
    {% block title %}Заказы | Админка{% endblock %}
    {{ block.super }}  
{% endblock %}
    <body>
        <div class="px-0 px-lg-0">
            <div class="container text-white py-2 text-center">
                <h1 class="display-4">View Orders</h1>
            </div>

            <div class="pb-5 px-0">
                <div class="container px-0">
                    <small><a href="/admin">Back to Admin Menu</a></small>
                    <div class="col-lg-12 pt-0 px-0 bg-white rounded shadow-sm mb-5">
                        <div class="table-responsive px-0">
                            <div class="container text-dark py-3 px-1 text-center">
                                <p><h3 class="display-6">All Orders</h3></p>
                                <table class="table table-sm table-responsive table-striped table-hover">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th scope="col">Order</th>
                                            <th scope="col">Email</th>
                                            <th scope="col">User</th>
                                            <th scope="col">Address</th>
                                            <th scope="col">City, State Zip</th>
                                            <th scope="col">Order Date</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Details</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for order in orders %}
                                        <tr scope="row">
                                            <td>#{{order.id}}</td>
                                            <td>{{order.user.email}}</td>
                                            <td>{{order.user.first_name}} {{order.user.last_name}}</td>
                                            <td>{{order.user.address.address}} {{order.user.address.address2}}</td>
                                            <td>{{order.user.address.city}}, {{order.user.address.state}} {{order.user.address.zipcode}}</td>
                                            <td>{{order.created_at}}</td>
                                            <form action="/admin/update_status" method='post'>
                                                {% csrf_token %}
                                                <td>{{order.status}} 
                                                    <select name='status' selected="Shipped">
                                                        <option value="Processing" {% if order.status == "Processing" %} selected {% endif %}>Processing</option>
                                                        <option value="Shipped" {% if order.status == "Shipped" %} selected {% endif %}>Shipped</option>
                                                        <option value="Canceled" {% if order.status == "Canceled" %} selected {% endif %}>Canceled</option>
                                                    </select>
                                                    <input type="hidden" name='order_id' value='{{order.id}}'>
                                                    <button class="btn btn-sm btn-dark">Update</button>
                                                </td>
                                            </form>
                                            <th><a href="/admin/order/{{order.id}}">Click for Details</a></th>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <!-- <h1>View Orders</h1>
        <table style='width:100%'>
            <thead>
                <tr>
                    <th>Order #</th>
                    <th>Email</th>
                    <th>User</th>
                    <th>Address</th>
                    <th>City, State Zip</th>
                    <th>Order Date</th>
                    <th>Status</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                {% for order in orders %}
                <tr>
                    <td>#{{order.id}}</td>
                    <td>{{order.user.email}}</td>
                    <td>{{order.user.first_name}} {{order.user.last_name}}</td>
                    <td>{{order.user.address.address}} {{order.user.address.address2}}</td>
                    <td>{{order.user.address.city}}, {{order.user.address.state}} {{order.user.address.zipcode}}</td>
                    <td>{{order.created_at}}</td>
                    <form action="/admin/update_status" method='post'>
                        {% csrf_token %}
                        <td>{{order.status}} 
                            <select name='status' selected="Shipped">
                                <option value="Processing" {% if order.status == "Processing" %} selected {% endif %}>Processing</option>
                                <option value="Shipped" {% if order.status == "Shipped" %} selected {% endif %}>Shipped</option>
                                <option value="Canceled" {% if order.status == "Canceled" %} selected {% endif %}>Canceled</option>
                            </select>
                            <input type="hidden" name='order_id' value='{{order.id}}'>
                            <button>Update</button>
                        </td>
                    </form>
                    <th><a href="/admin/order/{{order.id}}">Click for Details</a></th>
                </tr>
                {% endfor %}
            </tbody>
        </table> -->
    </body>
</html>